<template>
    <div class="snjztj">
        <div class="snjztj-top">
            <div class="top1">
                <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
                    <el-form-item label="行政区划">
                        <el-cascader v-model="form.stlcc" :options="xzqhdata" :props="xzqhprop" ref="xzqh"
                            @change="xzqhorgChange" :clearable="true"></el-cascader>
                    </el-form-item>
                    <span class="ccq">
                        <el-form-item label="超采区">
                            <el-select v-model="form.odcd" placeholder="请选择超采区" @change="ccqchange">
                                <el-option v-for="item in ccq" :key="item.odnm" :label="item.odcd" :value="item.odcd">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </span>
                    <el-form-item label="测站编码">
                        <el-input v-model="form.stcd" placeholder="请输入测站编码" style="width: 5rem;"></el-input>
                    </el-form-item>
                    <el-form-item label="测站名称">
                        <el-input v-model="form.stnm" placeholder="请输入测站名称" style="width: 5rem;"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="测站类别">
                        <el-select v-model="form.sttp" placeholder="请选择">
                            <el-option v-for="item in czlx" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="查询年份">
                        <el-date-picker v-model="form.yr" type="year" placeholder="请选择" value-format="yyyy" format="yyyy">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="查询时间">
                        <el-select v-model="form.quarter" placeholder="请选择" @change="jdbh">
                            <el-option v-for="item in jdoptions" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                </el-form>
                <el-button size="default" @click="chaxun"><i class="iconfont icon-sousuo"></i> 查 询</el-button>
            </div>
            <div class="top-button">
                <div class="top2">
                    <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
                        <!-- <el-form-item label="行政区划">
                            <el-cascader v-model="form.stlcc" :options="xzqhdata" :props="xzqhprop" ref="xzqh"
                                @change="xzqhorgChange" :clearable="true"></el-cascader>
                        </el-form-item>
                        <span class="ccq">
                            <el-form-item label="超采区">
                                <el-select v-model="form.odcd" placeholder="请选择超采区" @change="ccqchange">
                                    <el-option v-for="item in ccq" :key="item.odnm" :label="item.odcd" :value="item.odcd">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </span>
                        <el-form-item label="测站编码">
                            <el-input v-model="form.stcd" placeholder="请输入测站编码" style="width: 5rem;"></el-input>
                        </el-form-item>
                        <el-form-item label="测站名称">
                            <el-input v-model="form.stnm" placeholder="请输入测站名称" style="width: 5rem;"></el-input>
                        </el-form-item> -->
                        <el-form-item label="测站类别">
                            <el-select v-model="form.sttp" placeholder="请选择">
                                <el-option v-for="item in czlx" :key="item.statusid" :label="item.statusname"
                                    :value="item.statusid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="查询年份">
                            <el-date-picker v-model="form.yr" type="year" placeholder="请选择" value-format="yyyy"
                                format="yyyy">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="查询时间">
                            <el-select v-model="form.quarter" placeholder="请选择" @change="jdbh">
                                <el-option v-for="item in jdoptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="top2-button">
                    <el-button size="default" @click="chongzhi"><i class="el-icon-refresh"></i> 重 置</el-button>
                    <el-button size="default" @click="daochu"><i class="el-icon-upload2"></i> 导 出</el-button>
                </div>
            </div>
        </div>
        <div class="snjztj-middle">
            <el-table class="tableBox" :data="tableData" height="86.5%"
                :header-cell-style="{ background: '#b2dffe', color: '#000' }" :row-class-name="tableRowClassName"
                style="width: 100%" strip>
                <el-table-column type="selection" width="50" align="center">
                </el-table-column>
                <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="stcd" label="监测站编码" width="170" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="stnm" label="监测站名称" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="addvnm" label="行政区划" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="odcd" label="超采区" :show-overflow-tooltip="true">
                    <!-- <template slot-scope="scope">
                        <span v-if="scope.row.odcd == ''">其他</span>
                    </template> -->
                </el-table-column>
                <el-table-column prop="sttp" label="监测站类别" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.sttp == 1">水利地方站</span>
                        <span v-if="scope.row.sttp == 2">水利国家站</span>
                        <span v-if="scope.row.sttp == 3">自然资源站</span>
                    </template>
                </el-table-column>
                <el-table-column label="季度各月埋深月均值(m)" align="center" :show-overflow-tooltip="true">
                    <el-table-column prop="firstBd" :label="this.firstBd + '月埋深月均值'" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="secondBd" :label="this.serchBd + '月埋深月均值'" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="thirdBd" :label="this.threeBd + '月埋深月均值'" :show-overflow-tooltip="true">
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="bd" label="计算埋深(m)" width="170" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="lastBd" label="基准埋深(m)" :show-overflow-tooltip="true">
                </el-table-column>
            </el-table>
            <div class="bottom">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { xzqhlist, qylx, ccqjzztjlist, sjtqccqdymc, ccqwjhjzzdc } from '@/api/index'
import dayjs from 'dayjs'
import exprotFile from "@/utils/exportFile"
export default {
    data() {
        return {
            // 主页头部表单
            form: {
                stlcc: '220000',//行政区划
                odcd: '',//超采区
                stcd: '',//测站编码
                stnm: '',//测站名称
                sttp: '',//测站类型
                yr: '',//去年
                quarter: "",//季度
                quarter1: '',
                yr1: '',//今年
            },
            xzqhdata: [],//行政区划
            jdoptions: [
                {
                    label: "第一季度",
                    value: "1",
                },
                {
                    label: "第二季度",
                    value: "2",
                },
                {
                    label: "第三季度",
                    value: "3",
                },
                {
                    label: "第四季度",
                    value: "4",
                }
            ],
            firstBd: "",//上季度的第一个月
            serchBd: "",//上季度的第二个月
            threeBd: "",//上季度的第三个月
            fourBd: '',//本季度第一个月
            xzqhprop: {
                label: "addvnm",
                value: "addvcd",
                children: "addvcds",
                checkStrictly: true,
            },
            czlx: [], // 测站类别下拉框数组内容
            ccq: [],// 超采区下拉框内容
            tableData: [], // 表格数据
            // 底部页码
            pagesize: 10,
            currentPage: 1,
            total: 10,
            etm: '',//本季度的起始月
            stm: '',//上季度的起始月份
        }
    },
    mounted() {
        this.xzqhlist();//获取行政区划
        this.sjtqccqdymc();//获取超采区
        this.qylxobj();//获取测站类别
        let quarterOfYear = require('dayjs/plugin/quarterOfYear')
        dayjs.extend(quarterOfYear)
        // console.log(quarterOfYear);
        let start = dayjs().add(-1, 'quarter').startOf('quarter').format('MM')
        let middle = Number(start) + 1
        let end = dayjs().add(-1, 'quarter').endOf('quarter').format('MM')
        var end1 = Number(end) + 1;//本季度起始月
        if (end == 12) {
            end1 = 1
            if (end1 < 10) {
                end1 = '0' + end1
            }
        }
        // console.log(start, middle, end, end1);
        if (start == 10) {
            this.form.quarter1 = 4
            this.form.quarter = '第四季度'
        } else if (start == 1) {
            this.form.quarter1 = 1
            this.form.quarter = '第一季度'
        } else if (start == 4) {
            this.form.quarter1 = 2
            this.form.quarter = '第二季度'
        } else if (start == 7) {
            this.form.quarter1 = 3
            this.form.quarter = '第三季度'
        }
        this.firstBd = start
        this.serchBd = middle
        this.threeBd = end
        this.fourBd = end1
        this.getriqi();//获取日期
        this.ccqjzztjlist();//获取表格数据
    },
    methods: {
        // 获取年份
        getriqi() {
            let year1
            let nowdays = new Date()
            let year = nowdays.getFullYear()
            let month = nowdays.getMonth()
            if (month === 0) {
                month = 12
                year = year - 1
                // this.quarter = 4
            }
            if (month == 1 || month == 2) {
                year = year - 1
                // this.quarter = 4
            }
            if (month < 10) {
                month = '0' + month
            }
            // console.log(month);
            if (this.fourBd == 1) {
                year1 = Number(year) + 1
            }
            // console.log(year1);
            this.form.yr = year + ''
            this.form.yr1 = year1 + ''
            // console.log(this.form.yr);
            let yDate = new Date(year, month, 0)
            let startDareTime = year + '-' + this.firstBd + '-01'
            let endDateTime = year1 + '-' + this.fourBd + '-01'
            // console.log(startDareTime, endDateTime);
            this.stm = startDareTime
            this.etm = endDateTime
        },
        // 获取行政区划
        async xzqhlist() {
            const addvcd = '220000'
            const res = await xzqhlist(addvcd)
            // console.log(res);
            this.xzqhdata = res.data.data
            // console.log(this.xzqhdata);
        },
        // 行政区划改变,获取超采区的数据
        xzqhorgChange(val) {
            this.form.stlcc = val.slice(-1).toString();
            this.$refs.xzqh.dropDownVisible = false;
            // console.log(this.form.stlcc);
        },
        // 获取超采区
        async sjtqccqdymc() {
            const res = await sjtqccqdymc(this.form.stlcc)
            // console.log(res);
            this.ccq = res.data.data
        },
        // 超采区变化
        ccqchange(val) {
            this.form.odcd = val
            // console.log(val);
        },
        //季度下拉框change事件
        jdbh() {
            // console.log(this.form.quarter)
            if (this.form.quarter == "1") {
                this.firstBd = "1"
                this.serchBd = "2"
                this.threeBd = "3"
            } else if (this.form.quarter == "2") {
                this.firstBd = "4"
                this.serchBd = "5"
                this.threeBd = "6"
            } else if (this.form.quarter == "3") {
                this.firstBd = "7"
                this.serchBd = "8"
                this.threeBd = "9"
            } else if (this.form.quarter == "4") {
                this.firstBd = "10"
                this.serchBd = "11"
                this.threeBd = "12"
            }
        },
        // 获取区域类型数据
        async qylxobj() {
            // task_status
            // 获取状态数据
            const zt = 'station_genre'
            const res4 = await qylx(zt)
            // console.log(res4);
            this.czlx = res4.data.data
            // console.log(this.czlx);
        },
        // 获取表格数据
        async ccqjzztjlist() {
            const jzzobj = {
                etm: this.etm,
                odcd: this.form.odcd,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                quarter: this.form.quarter,
                quarter_status: '',
                stcd: this.form.stcd,
                stcdArray: [],
                sthn: '',
                stlcc: this.form.stlcc,
                stm: this.stm,
                stnm: this.form.stnm,
                sttp: this.form.sttp,
                year: this.form.yr
            }
            // console.log(jzzobj);
            const res = await ccqjzztjlist(JSON.stringify(jzzobj))
            // console.log(res);
            this.tableData = res.data.data.list
            this.total = res.data.data.total
            // console.log(this.tableData);
        },
        // 表格的隔行颜色改变
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'statistiss-row'
            } else {
                return ''
            }
        },
        // 页码切换
        handleCurrentChange(val) {
            this.currentPage = val
            const jzzobj = {
                etm: this.etm,
                odcd: this.form.odcd,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                quarter: this.form.quarter,
                quarter_status: '',
                stcd: this.form.stcd,
                sthn: '',
                stlcc: this.form.stlcc,
                stm: this.stm,
                stnm: this.form.stnm,
                sttp: this.form.sttp,
                year: this.form.yr
            }
            // console.log(jzzobj);
            ccqjzztjlist(JSON.stringify(jzzobj)).then(res => {
                // console.log(res);
                this.tableData = res.data.data.list
                this.total = res.data.data.total
                // console.log(this.tableData);
            })
        },
        handleSizeChange(val) {

        },
        // 查询
        chaxun() {
            this.ccqjzztjlist();//获取表格数据
        },
        // 重置
        chongzhi() {
            // console.log(1);
            // this.form.stlcc = ''
            this.form.odcd = ''
            this.form.stcd = ''
            this.form.stnm = ''
            this.form.sttp = ''
            this.pagesize = 10
            this.currentPage = 1
            this.ccqjzztjlist();//获取表格数据
        },
        // 导出
        daochu() {
            const ccqwjhjzzdaochuobj = {
                etm: this.etm,
                odcd: this.form.odcd,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                quarter: this.form.quarter,
                quarter_status: '',
                stcd: this.form.stcd,
                sthn: '',
                stlcc: this.form.stlcc,
                stm: this.stm,
                stnm: this.form.stnm,
                sttp: this.form.sttp,
                year: this.form.yr
            }
            ccqwjhjzzdc(JSON.stringify(ccqwjhjzzdaochuobj)).then(res => {
                // console.log(res);
                exprotFile.getExcel(res.data, "基准值数据统计");
            })
        }
    }
}
</script>
<style lang="scss" scoped>
html,
body {
    height: 100%;
}

.snjztj {
    width: 100%;
    height: 100%;

    ::v-deep .snjztj-top {
        width: 97%;
        height: 20%;
        margin: 0 auto;
        /* display: flex; */
        justify-content: space-between;
        box-sizing: border-box;
        /* border: 1px solid red; */

        .top1 {
            height: 50%;

            .el-form {
                /* width: 80%; */
                height: 50%;
                /* float: left; */

                .el-form-item {
                    padding-top: 10px;
                    padding-right: 10px;

                    .el-form-item__label {
                        background-color: #0055ab;
                        color: #fff;

                        .el-input {
                            width: 4.3125rem;

                            .el-input__inner {
                                width: 100%;
                            }
                        }
                    }
                }
            }

            .el-button {
                float: right;
                background-color: #0055ab;
                color: #fff;
                margin-top: -18px;

                .iconfont {
                    font-size: 14px;
                }
            }
        }

        .top-button {
            /* width: 20%; */
            height: 50%;
            /* padding-top: 10px; */
            /* float: right; */

            .el-form {
                /* width: 80%; */
                height: 50%;
                /* float: left; */

                .el-form-item {
                    padding-top: 10px;
                    padding-right: 10px;

                    .el-form-item__label {
                        background-color: #0055ab;
                        color: #fff;

                        .el-input {
                            width: 4.3125rem;

                            .el-input__inner {
                                width: 100%;
                            }
                        }
                    }
                }
            }


            .top2-button {
                float: right;
                height: 100%;
                margin-top: -62px;

                .el-button {
                    background-color: #0055ab;
                    color: #fff;

                    .iconfont {
                        font-size: 14px;
                    }
                }
            }
        }
    }

    ::v-deep .snjztj-middle {
        width: 97%;
        height: 80%;
        margin: 0 auto;
        /* border: 1px solid red; */
        box-sizing: border-box;

        .el-table {
            width: 100%;
            height: 90%;
            background-color: rgb(243, 243, 243);
            padding-top: 10px;

            .el-table__header-wrapper {}

            .el-table__body-wrapper {
                .el-icon-download:before {
                    font-size: 18px;
                }
            }
        }

        .bottom {
            width: 100%;
            height: 10%;

            .el-pagination {
                position: absolute;
                bottom: 3%;
                right: 0;
                right: 6%;
            }
        }
    }
}

/* 控制top表单的宽度 */
/deep/ .el-input {
    width: 9rem;

    .el-input__inner {
        width: 100%;
    }
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 2px; // 纵向滚动条 必写
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}


/* 表格的行高 */
/deep/ .tableBox {
    th {
        padding: 0 !important;
        height: 30px;
        line-height: 30px;
    }

    td {
        padding: 0 !important;
        height: 40px;
        line-height: 40px;
    }
}

// 鼠标经过颜色
/deep/ .el-table__body tr:hover>td {
    background-color: #d9effe !important;
}

/* 列标题的字体颜色 */
/deep/ .el-table th.el-table__cell>.cell {
    color: #000;
}

/* 内容的字体颜色 */
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
    color: #000;
}

/* 表格隔行改变的颜色 */
/deep/ .el-table__row.statistiss-row {
    background-color: #f2faff;
}

/deep/ .ccq {
    .el-form-item {
        .el-form-item__label {
            /* color: red !important; */
            width: 70px !important;
            /* text-align: center !important; */
        }
    }
}
</style>